<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            text-align: center;
        }
        table {
            margin: auto;
            text-align: left;
        }
        footer{
            padding: 2.5em;
        }
        #chart-container{
            height: 520px;
        }
    </style>
</head>
<body>
    
    <h2>Map</h2>
    <div id="chart-container"></div>

    <h2>Table</h2>
    <div id="table-container"></div>

    <footer>
       <a href="https://github.com/Surbowl/world-geo-json-zh">GitHub - Surbowl/world-geo-json-zh</a>
    </footer>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script type="module">
        // load word geo json zh data
        import worldGeoJsonZh  from 'https://cdn.jsdelivr.net/npm/@surbowl/world-geo-json-zh/+esm'
        console.log(worldGeoJsonZh)

        var chartDom = document.getElementById("chart-container")
        var tableDom = document.getElementById("table-container")

        // init chart
        var myChart = echarts.init(chartDom);
        echarts.registerMap('WorldZh', worldGeoJsonZh);
        // echarts map options
        var option = {
            tooltip: {
                trigger: 'item',
                showDelay: 0,
                transitionDuration: 0.2
            },
            series: [
                {
                    name: 'Demo',
                    type: 'map',
                    roam: true,
                    map: 'WorldZh',
                    nameProperty: 'name',
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: [ ]
                }
            ]
        };
        myChart.setOption(option);

        // init table
        var props = worldGeoJsonZh.features.map(f => f.properties);
        var table = convertArrayToHtmlTable(props);
        tableDom.appendChild(table);

        // function to convert JSON data to HTML table
        function convertArrayToHtmlTable(arr) {
            let table = document.createElement("table");
            let cols = Object.keys(arr[0]);
            let thead = document.createElement("thead");
            let tr = document.createElement("tr");
            cols.forEach((item) => {
            let th = document.createElement("th");
                th.innerText = item;
                tr.appendChild(th);
            });
            thead.appendChild(tr);
            table.append(tr)
            arr.forEach((item) => {
                let tr = document.createElement("tr");
                let vals = Object.values(item);
                vals.forEach((elem) => {
                    let td = document.createElement("td");
                    td.innerText = elem;
                    tr.appendChild(td);
                });
                table.appendChild(tr);
            });
            return table;
        }
    </script>
</body>
</html>
